/* Custom 404 */
/* Tested in Safari 6+, Chrome 26+, Firefox 23+, IE10, Opera 12+ */
/* This page was created to demonstrate CSS3 features - thus it may not validate CSS specs */

@import url(http://fonts.googleapis.com/css?family=Titillium+Web:400,600,700,200);    
        
            /* SELECTED TEXT */
            ::selection { background: #ff5e99; color: #FFFFFF; text-shadow: 0; }
            ::-moz-selection { background: #ff5e99; color: #FFFFFF; }

            html {
                margin-top: 80px;
                padding: 30px 10px;
                font-size: 20px;
                line-height: 1;
                -webkit-text-size-adjust: 100%;
                -ms-text-size-adjust: 100%;
                
                /* BG pattern */
                background:
                -webkit-radial-gradient(black 15%, transparent 16%) 0 0, 
                -webkit-radial-gradient(black 15%, transparent 16%) 8px 8px, 
                -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px, 
                -webkit-radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
                
                background:
                radial-gradient(black 15%, transparent 16%) 0 0,
                radial-gradient(black 15%, transparent 16%) 8px 8px,
                radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
                radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
                            
                background-color:#282828;
                background-size:16px 16px;
                
            }

            html, input { font-family: "Titillium Web", "Helvetica Neue", Helvetica, Arial, sans-serif; }
            p { margin: 16px 0; }
            
            body {
                background: none repeat scroll 0 0 #982E33;
                border-radius: 14px 14px 14px 14px;
                border-top: 2px solid #B65156;
                box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
                margin: 0 auto;
                width: 500px;
                _width: 500px;
                padding: 30px 10px 10px;
            }
              
            body, a, a:visited, a:active {
                color: #f1f1f1;
                text-decoration: none;
            }
                   
            ul {
                font-size: 16px;
                line-height: 1.4;
                list-style: square outside none;
                margin: 16px 24px 40px;
                padding: 0 0 0 40px;
            }

            h1 {
                margin:;
                font-size: 76px;
                text-align: center;
                margin: 0 0 0px 0;
                text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
                
            }

            h2 {
                font-size: 50px;
                text-align: center;
                margin: 12px 0 0 0;
                text-transform: uppercase;
                line-height: 40px;
                text-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
            }

            h3 {
                margin: 40px 0 8px;
                text-align: center;
                font-size: 30px;
                font-weight: 500;
                line-height: 1.4;
            }
            
            h4 {
                margin: 24px 0 8px 18px;
                text-transform: uppercase;
            }
            
            .author {
                font-size: 14px;
                padding: 0 10px 0 0;
                text-align: center;
            }

            .container {
                max-width: 468px;
                _width: 468px;
                margin: 0 auto;
            }
            
            .warning {
                margin: 40px 0 40px 0;
                padding: 10px 20px 16px;
                border-top:    1px solid #999;
				border-bottom: 1px solid #999;
            }
            
            .warning .sign.alert {
                background-image: url("http://simonalex.com/demo/404/redbox/404_icon_white.png");
                background-repeat: no-repeat;
                background-size: 90px auto;
                height: 64px;
                margin-right: 20px;
                float:left;
                text-indent: -9999px;
                width: 69px;
            }            
            
            .warning p {
                font-size: 16px;
                line-height: 20px;
            }
                    
            .sign.tip {
                background-image: url("http://simonalex.com/demo/404/redbox/404_icon_white.png");
                background-position: -70px -45px;
                background-repeat: no-repeat;
                background-size: 90px auto;
                float: left;
                height: 20px;
                margin-right: 6px;
                text-indent: -9999px;
                width: 20px;
            }       
            
            .sign.call {
                background-image: url("http://simonalex.com/demo/404/redbox/404_icon_white.png");
                background-position: -70px -22px;
                background-repeat: no-repeat;
                background-size: 90px auto;
                float: left;
                height: 20px;
                margin: 15px 8px 0 0;
                text-indent: -9999px;
                width: 20px;
            }  
                       
            .contact {
                padding: 4px 20px;
                background: #490a0e;
                border-radius: 6px;
                font-size: 12px;
            }
            
            .copyright {
                font-size: 12px;
                text-align: center;
            }
 
            
            
            /* Glass cover */
            body:before {         
                background: -moz-linear-gradient(-40deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.1) 40%, rgba(10,14,10,0.09) 40%, rgba(255,255,255,0.2) 90%); /* FF3.6+ */
                background: -webkit-linear-gradient(-40deg, rgba(255,255,255,0.09) 0%,rgba(255,255,255,0.1) 40%,rgba(10,14,10,0.09) 40%,rgba(255,255,255,0.2) 90%); /* Chrome10+,Safari5.1+ */            
                background: -o-linear-gradient(-40deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.1) 40%, rgba(10,14,10,0.09) 40%, rgba(255,255,255,0.2) 90%); /* Opera 11.10+ */
                background: -ms-linear-gradient(-40deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.1) 40%, rgba(10,14,10,0.09) 40%, rgba(255,255,255,0.2) 90%); /* IE10+ */
                background: linear-gradient(-220deg, rgba(255,255,255,0.09) 0%, rgba(255,255,255,0.1) 40%, rgba(10,14,10,0.09) 40%, rgba(255,255,255,0.2) 90%); /* W3C */

                border-radius: 6px 6px 6px 6px;
                border-top: 3px solid rgba(255, 255, 255, 0.2);
                border-left: 1px solid rgba(255, 255, 255, 0.3);
                border-right: 1px solid rgba(255, 255, 255, 0.2);
                border-bottom: 1px solid rgba(255, 255, 255, 0.2);
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
                content: " ";
                height: 836px;
                margin: -70px 0 0 -40px;
                position: absolute;
                width: 580px;
            }                           
                   
            /* Cover holder */            
              #header:before, #header:after, .copyright:before, .copyright:after {
                    background: -moz-linear-gradient(-40deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%); /* FF3.6+ */
                    background: -webkit-linear-gradient(-40deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%); /* Chrome10+,Safari5.1+ */            
                    background: -o-linear-gradient(-40deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%); /* Opera 11.10+ */
                    background: -ms-linear-gradient(-40deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%); /* IE10+ */
                    background: linear-gradient(-220deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.6) 50%, #0A0E0A 50%, #FFFFFF 100%);

                    border: 0px solid #999999;
                    border-radius: 10px 10px 10px 10px;
                    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5) inset, 0 0 3px #000000;
                    content: " ";
                    display: block;
                    height: 18px;
                    position: absolute;
                    width: 18px;
                }
                
                #header:before {
                    margin: -50px 0 0 -36px;
                }
                
                #header:after {
                    margin: -348px 0 0 485px;
                }
                
                .copyright:before {
                    margin: 40px 0 0 -36px;
                }
                .copyright:after {
                    margin: 28px 0 0 485px;
                } 

                       
                       
             /* Animation */          
                    .sign.alert {
                        -webkit-animation: blink 1s infinite;
                        -moz-animation:    blink 1s infinite;
                        -ms-animation:     blink 1s infinite;
                         animation:        blink 1s infinite;
                    }
                    
                    @-webkit-keyframes blink {
                       0% { opacity: 0.1; }
                       50% { opacity: 1; }
                       100% { opacity: 0.1; }  
                    }
                    
                    @-moz-keyframes blink {
                       0% { opacity: 0.1; }
                       50% { opacity: 1; }
                       100% { opacity: 0.1; }  
                    }
                    
                    @-ms-keyframes blink {
                       0% { opacity: 0.1; }
                       50% { opacity: 1; }
                       100% { opacity: 0.1; }  
                    }
                    
                    @keyframes blink {
                       0% { opacity: 0.1; }
                       50% { opacity: 1; }
                       100% { opacity: 0.1; }            
                    }


            /* Marquee Animation */                    
                    #footer, .marquee { overflow: hidden; }
            
                    .marquee {
                        -webkit-animation: scroll 10s ease infinite;
                        -moz-animation:    scroll 10s ease infinite;
                        -ms-animation:     scroll 10s ease infinite;
                         animation:        scroll 10s ease infinite;
                    }
                
                    @-webkit-keyframes scroll {
                        0%  { -webkit-transform:translateX(100%);opacity:0; }  
                        10% { -webkit-transform:translateX(0);opacity:1; }  
                        40% { -webkit-transform:translateX(0%); }  
                        50% { -webkit-transform:translateX(0%); } 
                        90% { opacity:1;}  
                        100% { opacity:0;}  
                    }
                        
                    @-moz-keyframes scroll {
                        0%  { -moz-transform:translateX(100%);opacity:0; }  
                        10% { -moz-transform:translateX(0);opacity:1; }  
                        40% { -moz-transform:translateX(0%); }  
                        50% { -moz-transform:translateX(0%); } 
                        90% { opacity:1;}  
                        100% { opacity:0;}  
                    }
                        
                    @keyframes scroll {
                        0%  { transform:translateX(100%);opacity:0; }  
                        10% { transform:translateX(0);opacity:1; }  
                        40% { transform:translateX(0%); }  
                        50% { transform:translateX(0%); } 
                        90% { opacity:1;}  
                        100% { opacity:0;}            
                    }            


